import { apiReq } from './common/apiRequest';
import { useState, useEffect } from 'react';
import { GithubUser } from './types/GithubUser';

export function Home() {
  const [userInfo, setUserInfo] = useState<GithubUser>();

  useEffect(() => {
    async function getUser() {
      const res = await apiReq.get('/api/user');
      setUserInfo(res.data);
      return res;
    }
    getUser();
  }, []);

  console.log('user:' + userInfo);

  return (
    <div>
      <div className="flex items-center">
        <img
          src={userInfo?.avatar_url}
          alt=""
          className="w-20 h-20 object-cover rounded-2xl mr-4"
        />
        <div>
          <h3 className="font-bold text-xl underline">{userInfo?.name}</h3>
        </div>
      </div>
    </div>
  );
}
